<template>
  <el-menu mode="horizontal"
           :ellipsis="false"
  >
    <h2 style="margin-left: 30px" class="color">肥猫片的博客平台</h2>
    <div style="flex-grow: 1"></div>
    <el-menu-item index="0">
      <router-link :to="{ path: '/' }">首页</router-link>
    </el-menu-item>

    <!--      <div v-if="state.form.success==1">{{state.form.username}}</div>-->
    <el-sub-menu index="1" v-if="state.form.success==1" style="margin-bottom: 10px">
      <template #title>{{ state.form.username }}</template>
      <el-menu-item index="1-1" @click="toFix" v-if="state.form.username=='肥猫片'">管理文章</el-menu-item>
    </el-sub-menu>

    <el-menu-item index="1" v-if="state.form.success!=1">
      <router-link :to="{ path: '/Login' }">登录</router-link>
    </el-menu-item>

    <el-menu-item index="2" v-if="state.form.success!=1">
      <router-link :to="{ path: '/regist' }">注册</router-link>
    </el-menu-item>

    <el-menu-item index="2" @click="loginOut" v-if="state.form.success==1">
      注销
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import {reactive} from "vue";

//统一管理变量
const state = reactive({
  form: {
    username: localStorage.getItem("username"),
    success: localStorage.getItem("success")
  }
})


import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const loginOut = () => {
  localStorage.removeItem("token")
  localStorage.removeItem("success")
  localStorage.removeItem("username")
  localStorage.removeItem("comment")
  localStorage.removeItem("user_id")

  ElMessage({
    message: '注销成功',
    type: 'success',
  })
  location.reload()
}

//转跳到管理界面
const router = useRouter()
const toFix = () => {
  router.push('/FixBlog')
}

</script>

<style>
.color {
  background: linear-gradient(45deg, rgba(254, 172, 94, 0.5), rgba(199, 121, 208, 0.5));
  -webkit-background-clip: text;
  color: transparent;
}
</style>